Hi friends welcome back for another post. Today we will talk about playing media in our Xamarin Forms apps. We won’t be using Xamarin Community Toolkit’s media element. Instead, we will use a VLC media player in Xamarin Forms. Why? because VLC media player can be an awesome alternative to the native media players available in Android and iOS. These native players work well, but are limited and lack some important functionalities.

VLC is a popular free open-source media player that is available on every major OS. It originated as a student project at l’ecole central de Paris. This project named VideoLan was initially meant to consist of a client and a server, to stream videos across the school’s campus. VLC which stands for VideoLan Client was initially the client part of the project. Now it is mostly known for its powerful media player functionalities.   Source: Wikipedia.

You might ask yourself; why do we need another media player, when Android and iOS have their native media players. The answer is simple, the native media players on each of these platforms are not powerful enough to handle certain scenarios like HLs streaming, Some file formats, and protocols… The VLC media player can be a great solution to implement these features in your app.

Here is the source code for this demo

It is very easy to get started with VLC media player. You first have to add appropriate nuget packages into your projects.

In this demo, we will play video, and this is done just as you would do if you want to play audio. First, on my main page, in XAML, I added the video view.

This video view will display the video we are playing. The next thing we have to do is, create a media player and pass the instance to the video view. Then we call the “Play” method of the media player. This plays the media we passed in the URL. This is very basic, the next thing is to control the media we are playing.

NOTE: If you want to play music, you need only to create the media player as we did above, and call its “Play” method. This plays media in your app, even when the app is in the background.

After using VLC library, and talking with the guys maintaining this awesome library I learned from them some important things to take into consideration when using VLC media player.

Now we know that playing media with VLC Media Player in Xamarin Forms is easy. The next thing is to let our users control the media just like any awesome media-playing app we know. For this, I added a set of buttons, sliders on our main page. The buttons will serve for (Play, Pause, Forward…) the sliders will be for volume and seek. We will go through each of these functionalities one by one. In the code behind our main page, I put the event handler methods for each of these actions performed on the UI.

The most basic functionality a media-playing app should have is to play/pause media. We have above the “Play” method this method lets us play a media item passed to the media player. This is fine if we are playing media for the first time, thus we want to start playing from the beginning of the media. But what if we want to play, pause when the user wants, and resume later? This is easy, as we can see below.

Now, once we are done playing, what if we want to stop the media? Easy… check how it is done below.

Now, our user doesn’t want to watch a specific part of our movie, what does he do ? he moves the stream forward. What if he changes his mind and wants to go back? What if he wants to watch only a specific part of the movie and wants to seek the stream to that part? VLC Media Player got you covered. This is how we do it.

Note that the media player item has a “Time” property. We can set a value to this property that will correspond to the time position where we want it to stream.

Once we do that, we can use the above method to move forward or backward for 10 seconds in this example.

When a user moves the duration slider, it causes the slider’s value to change. Since our slider has a min value of 0 and a max value of 100, we can consider its value as a percentage played and that left to play. The VLC Media Player provides us the “Position” property that is the movie’s position percentage in a range of 0.0 to 1. Taking this into consideration, here is how we can leverage it to implement the seek functionality.

Users want to know how long our movies, music will last and how much of it they have already watched. So we need to implement this functionality too. To do this, we will need to subscribe to a few media player events (PositionChanged and Playing). When the media player starts playing, the “Playing” event is called. When this event is fired, we can get the media’s duration from the “Length” property of VLC media player object.

As time passes and the user streams more of the movie, we want to display how long he has been watching. We do this by subscribing to the player’s “TimeChanged” event. In there, we get the media player’s “Time” property and display it to the user.

If our users want to mute our player or increase the volume for some reason, it is extremely easy. To mute, here is how it is done.

To control the volume, it is even easier.

Most often, you won’t stream media from free public sources. You will need the player to authenticate to that source. Unfortunately, VLC does not have a built in system for authentication, last time I checked, this was to be implemented. But, luckily we have a way around this! To authenticate, instead of passing headers to the player, we use an http client to query the API with the appropriate headers, then create a stream to the resource that we pass to the player as a “StreamMediaInput“. Note, if you are downloading media to play locally on iOS, here is an article demonstrating how to download this data from an API that streams its content bytes by bytes.

Once the media player starts playing media, errors might occur. If it is streaming, the network connection might be interrupted for example. We listen to errors that occur in the player with the “EncounteredError” event.

The VLC Media Player Element is a view that contains a video view and controls already available to manipulate any media stream at its disposal. This offers a plug-and-play functionality you can leverage to quickly build apps that consume media without the burden of writing UI elements yourself. You can customize this control to suit your purpose. Read more about this in this post by Martin Finkel, who introduces this awesome control.

Adding the media player element to your project is extremely easy. First, add font-awesome as mentioned above and add an instance of the media player element to your page. Then bind its properties to the ViewModel. In our source code, we added a small sample demonstrating how to use this control. The sample is inspired by this awesome demo.

One of the features several media playing apps have in common, is allowing users to read through multiple items. VLC bindings for Xamarin only have a tiny portion of VLC’s native libraries list management. This portion can’t be used to manage playlists, and bringing this native code to Xamarin bindings is not planned as mentioned here by one of the engineers maintaining this library. Meaning that you need to implement your own playlist management logic on top of VLC. But this is not a big deal. The VLC media player has an event called “EndReached” this event is fired once the media that is currently playing ends. You can listen to this event and play the next item, or select a random item from your playlist, etc. This allows you to build your own playlist logic.

Today we covered one of the most powerful media players out available out there for mobile devs. I’ve been a long-time user of VLC on Windows, Linux, and Mac. Therefore, working with this amazing library was such a pleasure. I was working on a project that required media playing functionality, but iOS’s native player didn’t do the job. Luckily, VLC came in to save the day. This article contained a condensed version of some of the things I learned throughout this journey.

https://mfkl.github.io/libvlc/crossplatform/xamarin/forms/2019/08/13/MediaPlayerElement-Plug-and-play-LibVLCSharp-UI-video-control.html

https://code.videolan.org/mfkl/libvlcsharp-samples/-/blob/master/MediaElement/MediaElement/MainViewModel.cs

https://code.videolan.org/videolan/LibVLCSharp/-/blob/3.x/src/LibVLCSharp.Forms/Shared/Themes/Generic.xaml